import React, { useCallback, useState, useEffect } from 'react'
import styles from './index.module.less'
import SelectBar from './selectBar'
import { cloneDeep } from 'lodash'
import { getUId } from '../../utils/tool'
import moment from 'moment'
import MoveChild from './moveChild'
import RightBar from './rightBar'
import EditBar from './editBar'
import ShowData from './showData'

const selectDefaultValueList = new Map()
selectDefaultValueList.set('text', '文本')
selectDefaultValueList.set('number', '数字范围')
selectDefaultValueList.set('button', '主要按钮')
selectDefaultValueList.set('switch', 'switch开关')
selectDefaultValueList.set('image', 'image')
selectDefaultValueList.set('textInput', 'textInput')
selectDefaultValueList.set('radio', 1)
selectDefaultValueList.set('checkbox', ['全选'])
selectDefaultValueList.set('select', 'Amin')
selectDefaultValueList.set('datepicker', moment(Date.now()))

const DragPlay = () => {
	const [mode, setMode] = useState('menu')

	const [revokeList, setRevokeList] = useState([])

	const [cTop, setCTop] = useState(0)
	const [cLeft, setCLeft] = useState(0)

	const [curType, setCurType] = useState('')
	const [dataList, setDataList] = useState([])

	const [curSelectNodeIdx, setCurSelectNodeIdx] = useState(null)
	const [curSelectNode, setCurSelectNode] = useState({})
	const [curSelectDOM, setCurSelectDOM] = useState(null)
	const [isEditing, setIsEditing] = useState(true)

	document.addEventListener('dragover', function (e) {
		e.preventDefault()
	})

	const onDragStart = async (event) => {
		setMode('menu')
		await event.persist()
		const type = event.target.getAttribute('datatype')
		setCurType(type)
	}

	const onDrop = useCallback(
		async (event) => {
			if (mode === 'node') return
			const top = event.clientY - cTop
			const left = event.clientX - cLeft
			await event.persist()
			let newDataList = cloneDeep(dataList)
			if (curSelectNodeIdx === null && curType && mode === 'menu') {
				const target = {
					uuid: getUId(),
					type: curType,
					value: selectDefaultValueList.get(curType),
					top,
					left,
					zIndex: 100,
				}
				if (curType === 'datepicker') {
					target.pickerType = 'default'
				}
				if (curType === 'button') {
					target.btnType = 'default'
				}
				if (curType === 'select') {
					target.options = [
						{ label: 'Lucy', value: 'Lucy', uuid: getUId() },
						{ label: 'Jack', value: 'Jack', uuid: getUId() },
						{ label: 'Amin', value: 'Amin', uuid: getUId() },
					]
				}
				if (curType === 'checkbox') {
					target.options = [{ label: '全选', value: 'all', uuid: getUId() }]
				}
				if (curType === 'radio') {
					target.options = [
						{ label: 'A', value: 1, uuid: getUId() },
						{ label: 'B', value: 2, uuid: getUId() },
						{ label: 'C', value: 3, uuid: getUId() },
					]
				}
				newDataList.push(target)
			}

			setRevokeList((l) => {
				l.push(cloneDeep(dataList))
				return [...l]
			})
			setDataList([...newDataList])
		},
		[curType, dataList, cTop, cLeft, curSelectNodeIdx, mode]
	)

	useEffect(() => {
		// const list = JSON.parse(localStorage.getItem('list'))
		// list.forEach((item) => {
		// 	if (item.type === 'datepicker' && item.pickerType !== 'range') {
		// 		item.value = moment(item.value)
		// 	}
		//
		// 	if (item.type === 'datepicker' && item.pickerType === 'range') {
		// 		item[item.startField]
		// 			? (item[item.startField] = moment(item[item.startField]))
		// 			: (item.startTime = moment(item.startTime))
		//
		// 		item[item.endField]
		// 			? (item[item.endField] = moment(item[item.endField]))
		// 			: (item.endTime = moment(item.endTime))
		//
		// 		console.log(item)
		// 	}
		// })
		// setDataList(list)
	}, [])

	const nodeSelect = (event, type) => {
		event.stopPropagation()
		if (type === 'container') {
			setCurSelectNode({})
			setCurSelectNodeIdx(null)
			setCurType('')
			return
		}
		setCurType(type)
	}

	const outInfo = () => {
		localStorage.setItem('list', JSON.stringify(dataList))
	}

	return (
		<div className={styles.outBox}>
			<div className={styles.box}>
				<SelectBar
					setCurSelectNodeIdx={setCurSelectNodeIdx}
					curSelectNodeIdx={curSelectNodeIdx}
					onDragStart={onDragStart}
				/>
				{/*<button onClick={outInfo}>导出</button>*/}

				<div className={styles.center}>
					<EditBar
						isEditing={isEditing}
						setIsEditing={setIsEditing}
						curSelectNodeIdx={curSelectNodeIdx}
						setCurSelectNode={setCurSelectNode}
						dataList={dataList}
						setDataList={setDataList}
						revokeList={revokeList}
						setRevokeList={setRevokeList}
						setCurSelectNodeIdx={setCurSelectNodeIdx}
					/>
					{isEditing ? (
						<MoveChild
							setCurSelectDOM={setCurSelectDOM}
							onDrop={onDrop}
							setRevokeList={setRevokeList}
							setCTop={setCTop}
							setCLeft={setCLeft}
							dataList={dataList}
							setDataList={setDataList}
							setCurType={setCurType}
							nodeSelect={nodeSelect}
							curSelectNode={curSelectNode}
							curSelectNodeIdx={curSelectNodeIdx}
							setCurSelectNode={setCurSelectNode}
							setCurSelectNodeIdx={setCurSelectNodeIdx}
							revokeList={revokeList}
						/>
					) : (
						<ShowData />
					)}
				</div>
				<RightBar
					curType={curType}
					curSelectNodeIdx={curSelectNodeIdx}
					setCurSelectNode={setCurSelectNode}
					curSelectNode={curSelectNode}
					dataList={dataList}
					setDataList={setDataList}
					setRevokeList={setRevokeList}
					revokeList={revokeList}
					curSelectDOM={curSelectDOM}
				/>
			</div>
		</div>
	)
}

export default DragPlay
